<template>
  <div class="index">
    <keep-alive :include="['Home', 'Shequ', 'My', 'Caipu', 'Biji']">
      <router-view></router-view>
    </keep-alive>
    <van-tabbar v-model="active"  inactive-color="#646566" route>
      <van-tabbar-item
        v-for="(item, index) in navdata"
        :key="index"
        :to="{ name: item.routeName }"
      >
        <span>{{ item.title }}</span>
        <template #icon="props">
          <img :src="props.active ? item.activeIcon : item.inactiveIcon" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      active: 2,
      navdata: [
        {
          title: "首页",
          activeIcon: require("../assets/home-active.png"),
          inactiveIcon: require("../assets/home.png"),
          routeName: "Home",
        },
        {
          title: "菜谱",
          activeIcon: require("../assets/Caipu-active.png"),
          inactiveIcon: require("../assets/Caipu.png"),
          routeName: "Caipu",
        },
        {
          title: "笔记",
          activeIcon: require("../assets/Biji-active.png"),
          inactiveIcon: require("../assets/Biji.png"),
          routeName: "Biji",
        },
        {
          title: "我的",
          activeIcon: require("../assets/my-active.png"),
          inactiveIcon: require("../assets/my.png"),
          routeName: "My",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
/deep/.van-tabbar-item--active{
  color: #f096ca;
}
/deep/.van-tabbar-item{
 font-size: 15px;
 font-weight: bold;
}
</style>